<template>
    <div>
        <cus-modal
            ref="modal"
            :title="form.materialName + ' - 指定食材营养匹配/食物成分表'"
            @on-visible-change="onVisibleChange"
            width="1000"
            @onOk="onOk"
            cancelBtnName="关闭"
            :showOkBtn="false"
        >
            <Spin fix v-if="loading"></Spin>
            <div class="contentBox">
                <div class="contentBox-left">
                    <div style="width:280px">
                        <div style="margin-bottom:10px">已匹配营养的类似食材列表</div>
                        <Form ref="formValidate" :model="form" >
                            <FormItem label="" prop="searchMaterialName" :label-width="0">
                                <Input
                                    v-model="form.searchMaterialName"
                                    maxlength="20"
                                    clearable
                                    placeholder="搜索已匹配食材"
                                    style="width: 200px"
                                > 
                                </Input>
                            </FormItem>
                            <cusButton type="primary" @onClick="theMatchingFoodListApi()">查询</cusButton>
                        </Form>
                        <div class="contentBox-left-topBox" id="theMatchingFoodListList">
                            <div v-for="(item, index) in theMatchingFoodListList" :key="index" :class="selectLeftItem && selectLeftItem.materialCode && selectLeftItem.materialCode == item.materialCode ? 'selecteft' : ''" class="itemBox" @click="selectLeftBtn(item, 0)">
                                {{ item.foodName }}
                            </div>
                        </div>
                        <div style="height:32px;line-height:32px">食物成分表中名称类似食材列表</div>
                        <div class="contentBox-left-bottomBox" id="selectMatchingNutritionDtlAndBudgeteList">
                            <div v-for="(item, index) in selectMatchingNutritionDtlAndBudgeteList" :key="index" :class="selectLeftItem && selectLeftItem.id && selectLeftItem.id == item.id ? 'selecteft' : ''" class="itemBox" @click="selectLeftBtn(item, 1)">
                                {{ item.nutritionName }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentBox-center">
                    <div style="width:280px">
                        <div style="margin-bottom:10px">食材标准名列表</div>
                        <Form ref="formValidate" :model="form" >
                            <FormItem label="" prop="nutritionName" :label-width="0">
                                <Input
                                    v-model="form.nutritionName"
                                    maxlength="20"
                                    clearable
                                    placeholder="搜索标准名"
                                    style="width: 200px"
                                > 
                                </Input>
                            </FormItem>
                            <cusButton type="primary" @onClick="selectAllNutritionApi()">查询</cusButton>
                        </Form>
                        <div class="contentBox-left-topBox" style="height:512px" id="selectAllNutritionList">
                            <div v-for="(item, index) in selectAllNutritionList" :key="index" class="itemBox" :class="selectNurItem && selectNurItem.id && selectNurItem.id == item.id && selectNur == 1 ? 'selecteft' : ''" @click="selectNurBtn(item, 1)">
                                {{ item.nutritionName }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentBox-right">
                    <div style="width:280px">
                        <div style="margin-bottom:10px">概算营养匹配列表</div>
                        <Form ref="formValidate" :model="form" >
                            <FormItem label="" prop="nutritionName2" :label-width="0">
                                <Input
                                    v-model="form.nutritionName2"
                                    maxlength="20"
                                    clearable
                                    placeholder="搜索概算营养"
                                    style="width: 200px"
                                > 
                                </Input>
                            </FormItem>
                            <cusButton type="primary" @onClick="selectAllNutritionBudgetApi()">查询</cusButton>
                        </Form>
                        <div class="contentBox-left-topBox" style="height:512px" id="selectAllNutritionBudgetList">
                            <div v-for="(item, index) in selectAllNutritionBudgetList" :key="index" class="itemBox" :class="selectNurItem && selectNurItem.id && selectNurItem.id == item.id && selectNur == 2 ? 'selecteft' : ''" @click="selectNurBtn(item, 2)">
                                {{ item.nutritionName }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bBox">
                <div class="chooseItem">当前食材: {{ selectItem ? selectItem.materialName : ''}}</div>
                <Icon type="md-infinite" size="20" style="padding:0 5px" />
                <div class="chooseItem" style="margin-right:40px">所选营养: {{ selectNurItem ? selectNurItem.nutritionName : '暂未选择'}}</div>
                <Button type="primary" @click="goCheck()">匹配</Button>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import {
    selectAllNutrition,
    selectAllNutritionBudget,
    theMatchingFoodList,
    selectMatchingNutritionDtlAndBudgete,
    matchingFoodNutrition
} from "@/api/business/dishesModule";

const form = {
    type: 0, // 匹配类型
    mealMaterialName: "", // 食谱原料名
    materialName: '', // 商品名称
    nutritionName: '', // 食材标准名
    nutritionName2: '', // 搜索概算营养
    searchMaterialName: '', // 搜索食材名称
    foodName: '', // 食材名称
};

export default {
    data() {
        return {
            form: form,
            loading: false,
            selectItem: null,
            selectNurItem: null,
            selectNur: null,
            selectLeftItem: null,
            selectAllNutritionList: [],
            selectAllNutritionBudgetList: [],
            theMatchingFoodListList: [],
            selectMatchingNutritionDtlAndBudgeteList: [],
        };
    },
    mounted() {
        this.form = this.$cu.deepClone(form);
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.form = this.$cu.deepClone(form);
                this.selectItem = null;
                this.selectNurItem = null;
                this.selectLeftItem = null;
                this.selectNur = null;
            }
        },
        show() {
            this.$refs["modal"].show = true;
            this.selectAllNutritionApi(); // 食材标准名列表
            this.selectAllNutritionBudgetApi(); // 概算营养匹配列表
            this.theMatchingFoodListApi(); // 已匹配营养的类似食材列表
            this.selectMatchingNutritionDtlAndBudgeteApi(); // 食物成分表中名称类似食材列表
        },
        onOk() {
            if(this.step == 1) {
                this.step = 2;   
            }
            this.selectProductMaterialListApi();
        },
        // 选中营养
        selectNurBtn(item, type) {
            this.selectNur = type;
            this.selectNurItem = item;
            this.selectLeftItem = null;
        },
        // 左侧选中
        selectLeftBtn(row, type) {
            this.selectLeftItem = row;
            let yinId = type == 0 ? this.selectLeftItem.nutritionId : this.selectLeftItem.id;
            this.selectNurItem = null;
            this.selectNur = 1;
            // 轮询 - 食材标准名列表
            this.selectAllNutritionList.map((item, index) => {
                if(item.id == yinId) {
                    this.selectNurItem = item;
                    this.scrollView(index, "selectAllNutritionList")
                }
            })
        },
        // 食材标准名列表
        selectAllNutritionApi() {
            this.loading = true;
            return new Promise(resolve => {
                selectAllNutrition({
                    nutritionName: this.form.nutritionName
                }).then(res => {
                    this.loading = false;
                    if (res.retCode === 2000) {
                        this.selectAllNutritionList = res.data;
                        resolve();
                    }
                })
            })
        },
        // 概算营养匹配列表
        selectAllNutritionBudgetApi() {
            return new Promise(resolve => {
                selectAllNutritionBudget({
                    nutritionName: this.form.nutritionName2
                }).then(res => {
                    if (res.retCode === 2000) {
                        this.selectAllNutritionBudgetList = res.data;
                        resolve();
                    }
                })
            })
        },
        // 已匹配营养的类似食材列表
        theMatchingFoodListApi() {
            return new Promise(resolve => {
                theMatchingFoodList({
                    materialName: this.form.searchMaterialName
                }).then(res => {
                    if (res.retCode === 2000) {
                        this.theMatchingFoodListList = res.data;
                        resolve();
                    }
                })
            })
        },
        // -食物成分表中名称类似食材列表
        selectMatchingNutritionDtlAndBudgeteApi() {
            return new Promise(resolve => {
                selectMatchingNutritionDtlAndBudgete({
                    foodName: this.form.materialName
                }).then(res => {
                    if (res.retCode === 2000) {
                        this.selectMatchingNutritionDtlAndBudgeteList = res.data;
                        resolve();
                    }
                })
            })
        },
        // 匹配确认
        goCheck() {
            if(!this.selectItem) {
                this.$Message.warning('请先选择您要进行匹配的食材');
                return
            }
            if(!this.selectNurItem) {
                this.$Message.warning('请先选择您要匹配的营养');
                return
            }
            this.matchingFoodNutritionApi();
        },
        // 绑定
        matchingFoodNutritionApi() {
            this.loading = true;
            return new Promise(resolve => {
                matchingFoodNutrition({
                    materialId: this.selectItem.materialId,
                    nutritionId: this.selectNurItem.id,
                    nutritionName: this.selectNurItem.nutritionName,
                    nutritionType: this.selectNurItem.nutritionType
                }).then(res => {
                    this.loading = false;
                    if (res.retCode === 2000) {
                        this.$Message.success("匹配营养成功.")
                        resolve();
                    }
                })
            })
        },
        // 滚动到对应的位置
        scrollView(index, name) {
            setTimeout(() => {
                let list = document.getElementById(name);
                list.scrollTop = index * 38;
            }, 200);
        }
    },
};
</script>

<style scoped>
/deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
    /* height: 40px !important; */
    height: auto!important;
    line-height: 40px !important;
}
/deep/.ivu-select-selection {
    height: auto!important;
    min-height: 40px!important;
    border-radius: 2px !important;
}
/deep/.ivu-table-cell {
    padding-left: 0!important;
    padding-right: 0!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}
/deep/.ivu-table td {
    position: relative!important;
}
</style>

<style scoped lang="less">
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:4px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,255,255,0.4);
}
.contentBox {
    display: flex;
    justify-content: space-between;
    &-left {
        &-topBox {
            height: 240px;
            overflow: hidden;
            overflow-y: auto;
            border: 1px solid #e3e8ee;
            border-radius: 3px;
        }
        &-bottomBox {
            height: 240px;
            overflow: hidden;
            overflow-y: auto;
            border: 1px solid #e3e8ee;
            border-radius: 3px;
        }
    }
    &-center {
        display: flex;
        align-items: center;
        padding: 0 40px;
    }
}

.selecteft {
    color: #1890ff;
    background: #e5f6ff;
    border-left: 2px solid #1890ff!important;
}

.itemBox {
    // padding: 8px 16px;
    height: 38px;
    line-height: 38px;
    padding-left: 8px;
    overflow: hidden;
    border-left: 2px solid rgba(255, 255, 255, 0);
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.chooseItem {
    line-height: 22px;
    padding: 5px 8px;
    border: 1px solid #e3e8ee;
    border-radius: 3px;
    background: white;
    text-align: center;
    word-break: break-all;
    font-size: 12px;
    min-width: 120px;
    min-height: 34px;
}

.bBox {
    margin-top: 20px;
    padding: 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
